import React, { Component } from 'react';
import { SearchBar } from 'antd-mobile';
import styles from './Search.module.scss';
import Store from '../../redux/Store';
import Action from '../../redux/Action';
import Axios from '../../utils/request';

class Header extends Component {
	constructor(props) {
		super(props);
		this.state = {
			value: '', //表单输入框内容
			tagList: [] //历史搜索记录
		};
	}
	componentDidMount() {
		//历史搜索记录
		Axios({
			method: 'get',
			url: '/temple/historyQuery'
		}).then((res) => {
			console.log(res);
			this.setState({
				tagList: res.data.data
			});
		});
	}
	onChange = (value) => {
		this.setState({ value });
	};
	clear = () => {
		this.setState({ value: '' });
	};
	//提交表单
	submit = (value) => {
		// console.log(value);
		//redux管理搜索内容
		Store.dispatch(Action.iptValue(value));
		//表单框置空
		this.setState({ value: '' });
		//跳转到header页面
		this.props.history.push('/header');
	};
	//取消 返回上一页
	onCancel = () => {
		this.props.history.push('/header');
	};
	//删除历史记录
	handleDelete = () => {
		Axios({
			method: 'get',
			url: '/temple/deleteRedis'
		}).then((res) => {
			console.log(res);
			// this.setState({
			// 	tagList: res.data.data
			// });
		});
	};
	render() {
		const { tagList } = this.state;
		return (
			<div className={styles.headBox}>
				{/* 搜索栏 */}
				<SearchBar
					value={this.state.value}
					placeholder="请输入关键字"
					onSubmit={(value) => this.submit(value)}
					onClear={(value) => console.log(value, 'onClear')}
					// onFocus={() => console.log('onFocus')}
					// onBlur={() => console.log('onBlur')}
					onCancel={this.onCancel}
					showCancelButton
					onChange={this.onChange}
					className={styles.searchIpt}
				/>
				{/* 搜索历史 */}
				<div className={styles.content} style={{ height: document.documentElement.clientHeight - 72 }}>
					<div className={styles.title}>
						搜索历史
						<p onClick={this.handleDelete} />
					</div>
					<ul className={styles.tag}>
						{tagList.length === 0 ? (
							<span
								style={{
									fontSize: '0.13rem',
									color: '#808080'
								}}
							>
								暂无
							</span>
						) : (
							tagList.map((item) => {
								console.log(item);
								return <li key={item}>{item}</li>;
							})
						)}
					</ul>
				</div>
			</div>
		);
	}
}

export default Header;
